---
name: useScroll
route: /useScroll
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

# useScroll

Get the scroll position of an element.


## Examples

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Basic Usage' description='Try to scroll the box below.'>
  <Demo1 />
</JackBox>

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Detect Whole Page Scroll' description='Try to scroll this webpage.'>
  <Demo2 />
</JackBox>

## API
```
interface Position {
  left: number;
  top: number;
}

type Target = HTMLElement | Document;

function useScroll<T extends Target>(): [Position, MutableRefObject<T>]
function useScroll<T extends Target>(arg: Target | (() => Target)): [Position]
```

### Result

| Property | Description                                                       | Type                 |
|------|----------|------|
| position | The current scroll position of the element. | `{x: number, y: number}`  |
| ref | When no param is passed, this ref will be listened | `RefObject<HTMLElement>` |

### Params

| Property | Description                                                        | Type                   | Default |
|---------|----------------------------------------------|------------------------|--------|
| dom? | optional, if none is passed, this hook will subscibe to the ref that it returns  | HTMLElement \| Document \| (() => HTMLElement) \| (() => Document) \| undefined | -      |
